<template>
    <div class="product-details">
      <!-- 顶部导航栏 -->
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        :right-text="rightText"
        @click-left="onClickLeft"
        class="custom-nav-bar"
      />
      
      <h1>{{ product.name }}</h1>
      <div class="product-image">
        <img :src="product.image" alt="Product Image" />
      </div>
      <div class="product-info">
        <p><strong>价格:</strong> {{ product.price }} 元</p>
        <p><strong>描述:</strong> {{ product.description }}</p>
        <p><strong>库存:</strong> {{ product.stock }} 件</p>
        <div class="quantity-selector">
          <label for="quantity">数量:</label>
          <input
            type="number"
            id="quantity"
            v-model.number="quantity"
            min="1"
            :max="product.stock"
            class="quantity-input"
          />
        </div>
      </div>
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-button type="warning" @click="addToCart" :disabled="quantity <= 0 || quantity > product.stock">加入购物车</van-button>
        <van-button type="danger" @click="buyNow">立即购买</van-button>
      </van-action-bar>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        product: {
          image: 'https://oss.huawa.com/shop/placeorder/07015473287544961.jpg',
          price: 89.00,
          description: '11朵香槟玫瑰',
          stock: 10
        },
        quantity: 1,
        rightText: '' // 可以根据需要设置右侧文本，这里暂时留空
      };
    },
    methods: {
      onClickLeft() {
        this.$router.back();
      },
      addToCart() {
        if (this.quantity > 0 && this.quantity <= this.product.stock) {
          alert(`已成功将 ${this.quantity} 件商品添加到购物车！`);
          this.quantity = 1; // 重置数量选择器（可选）
        }
      },
      buyNow() {
        alert('立即购买功能尚未实现！');
      }
    }
  };
  </script>
  
  <style scoped>
  .custom-nav-bar {
    /* 自定义导航栏样式 */
    background-color: #fff; 
    --van-nav-bar-title-font-size: 18px; 
    --van-nav-bar-left-text-color: #007aff; 
    --van-nav-bar-right-text-color: #007aff; 
  }
  
  .product-image img {
    max-width: 100%; /* 调整图片的最大宽度 */
    height: auto;
    border-radius: 8px;
  }
  
  .product-info {
    margin-top: 20px;
    /* 移除text-align: center; 以使文字左对齐 */
    text-align: left;
  }
  
  .quantity-selector {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .quantity-input {
    width: 50px;
    padding: 5px;
    margin-left: 10px;
    text-align: center;
  }
  
  .van-button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 5px;
  }
  
  .van-button.warning {
    background-color: #ff9900;
  }
  
  .van-button.danger {
    background-color: #ff5722;
  }
  
  /* 如果需要禁用状态的样式 */
  .van-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
</style>